<template>
  <!--授权弹出层-->
  <view>
    <up-popup
        :show="show"
        :round="10"
        :closeOnClickOverlay="true"
        @close="close"
        @open="open">
      <view class="contact-page">
        <view class="login-button"  @click="auth()">
            <span v-if="!loginBtnLoading" @click="auth()">点击按钮进行登录认证</span>
          <up-loading-icon v-else textSize="20px" textColor="#007aff" text="点击按钮进行登录认证"></up-loading-icon>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import {ref, defineProps, getCurrentInstance, defineEmits} from 'vue';
import {useStore} from "vuex";

const {proxy} = getCurrentInstance();
const store = useStore();
// 定义接收的参数
const props = defineProps({
  //是否关闭底部的导航
  isCloseBar: {
    type: Boolean,
    required: false, // 表示必须传递
    default: true,    //默认关闭
  },
});

//定义emit触发类型，回调给父组件
const emit = defineEmits(['ok']);

const show = ref(false);

// 打开弹窗并传入 item
const open = () => {
  show.value = true;
  if (props.isCloseBar) {
    uni.hideTabBar();
  }
}

// 关闭弹窗
const close = () => {
  show.value = false;
  if (props.isCloseBar) {
    uni.showTabBar();
  }
}

//登录按钮loding防止多次请求
const  loginBtnLoading = ref(false);

/**
 * 认证
 */
const auth = function () {
  loginBtnLoading.value=true;
  proxy.$tool.login(() => {
    //回调给父组件
    emit("ok")
    close();
    loginBtnLoading.value=false;
  },()=>{
    loginBtnLoading.value=false;
  })
}





defineExpose({
  open
})
</script>

<style scoped lang="scss">
/* 页面容器 */
.contact-page {
  padding: 20rpx;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login-button {
    margin-bottom: 30px;
    margin-top: 10px;
    padding: 6px 12px;
    font-size: 23px;
    color: #007aff;
    border: 1px solid #007aff;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
  }
}

</style>
